import React, { useState, useEffect } from 'react';
import { Image } from 'antd';
import { getNewMvApi } from '@/api/recommend';
import { formatTimestamp } from '@/utils/dateFormat';
import MvItem from '@/components/mv-item/MvItem';
import style from './Mv.module.css';

export default function Mv() {
  const areaArr = ['', '内地', '港台', '欧美', '日本', '韩国'];
  const [area, setArea] = useState('');
  const [mv, setMv] = useState([]);
  useEffect(() => {
    // 获取最新mv
    const getNewMv = async () => {
      const { data } = await getNewMvApi({ area: area })
      setMv(data)
    }
    getNewMv()
  }, [area]);
  // 改变mv区域
  const changeArea = (value) => {
    setArea(value)
  };
  return (
    <>
      <section className={style.titleContainer}>
        <div className={style.title}>最新MV</div>
        {
          areaArr.map(item => {
            return (
              <span 
                key={item} 
                className={`${style.area} ${item === area ? style.activeColor : ''}`} 
                onClick={() => changeArea(item)}>
              {item ? item : '全部'}</span>
            )
          })
        }
      </section>
      <section className={style.mvContainer}>
        {
          mv.map(item => <MvItem key={item.id} {...item} width={320} height={200} />)
        }
      </section>
    </>
  )
}
